<!--
 * @Author: wangshuixin 2412658453@qq.com
 * @Date: 2024-11-11 13:38:12
 * @LastEditors: wangshuixin 2412658453@qq.com
 * @LastEditTime: 2024-12-24 15:43:54
 * @FilePath: \sr_system_manager_ui\src\components\StatusBar\index.vue
 * @Description: 状态栏
-->

<script setup lang="ts">
import { StatusColorMap, StatusMap, DeanOfficeStatusMap, PublicityStatusMap } from '@/utils/constText'

const props = defineProps({
  /* 状态 */
  status: {
    type: Number,
    default: 0,
  },
  // 类型名称
  otherTypeName: {
    type: String,
    default: ''
  },
  btnTitle: {
    type: String,
    default: '审核记录'
  },
  showRightArea: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['click'])

</script>

<template>
  <div class="status-bar">
    <div class="status-box">
      <span class="status-title">状态</span>
      <span
        class="status-dot"
        :style="`background-color: ${StatusColorMap[props.status as keyof typeof StatusColorMap]}`"
      />
      <span class="status-text" :style="`color: ${StatusColorMap[props.status as keyof typeof StatusColorMap]}`">
        {{ (props.otherTypeName !== '优秀网络文化成果' && props.otherTypeName !== '指导大学生创新创业竞赛' && props.otherTypeName !== '教学基本建设' && props.otherTypeName !== '教学能力奖' && props.otherTypeName !== '教材')
          ? StatusMap[props.status as keyof typeof StatusMap]
           : (props.otherTypeName === '优秀网络文化成果' ? PublicityStatusMap[props.status as keyof typeof StatusMap] : DeanOfficeStatusMap[props.status as keyof typeof StatusMap])
        }}
      </span>
    </div>
    <div v-if="props.showRightArea">
      <slot name="rightArea">
        <el-button link type="primary" @click="emits('click')">
          {{ props.btnTitle }}
        </el-button>
      </slot>  
    </div>
  </div>
</template>

<style scoped lang="scss">
.status-bar {
  height: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  padding: 0px 20px;
  border-bottom: 1px solid #F2F3F5;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  .status-box {
    display: flex;
    align-items: center;
    flex-direction: row;
    .status-title {
      color: #4E5969;
      font-size: 14px;
    }
    .status-dot {
      width: 6px;
      height: 6px;
      border-radius: 3px;
      margin-right: 8px;
      margin-left: 16px;
    }
    .status-text {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>